<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            text-align: center;
        }
    </style>
</head>

<body>
    <h2>Electricity Usage, 2019 --- 2019年用电量</h2>
</body>
<script src="./d3@6.js"></script>
<script>
    width = 954
    height = 1080
    margin = { top: 70, right: 0, bottom: 0, left: 40 }



    parseDate = e => d3.timeParse("%Y-%m-%dT%H:%M")
    parseData = d => ({ date: parseDate(`${d["DATE"]}T${d["START TIME"]}`), usage: +d["USAGE"] })


    // data = d3.csvParse(await FileAttachment("../pge-electric-data.csv").text(), parseData)
    data = [];
    d3.csv('../pge-electric-data.csv', function (res) {
        data.push({ 'date': res['DATE'] + 'T' + res['START TIME'], 'usage': res['USAGE'] })
        // console.log(res);
    })

    console.log(data);

    dateExtent = d3.extent(data, d => d.date)

    x = d3.scaleBand(d3.range(24), [margin.left, width - margin.right]).round(true)

    y = d3.scaleBand(d3.timeDays(...dateExtent), [margin.top, height - margin.bottom]).round(true)
    // height = margin.top + margin.bottom + (d3.timeDay.count(...dateExtent) + 1) * 10
    console.log(height);

    color = () => {
        let [min, max] = d3.extent(data, d => d.usage);
        if (min < 0) {
            max = Math.max(-min, max);
            return d3.scaleDiverging([-max, 0, max], t => d3.interpolateRdBu(1 - t));
        }
        return d3.scaleSequential([0, max], d3.interpolateReds);
    }

    xAxis = g => g
        .attr("transform", `translate(0,${margin.top})`)
        .call(d3.axisTop(x).tickFormat(formatHour))
        .call(g => g.select(".domain").remove())

    yAxis = g => g
        .attr("transform", `translate(${margin.left},0)`)
        .call(d3.axisLeft(y).tickFormat(formatDay))
        .call(g => g.select(".domain").remove())

    formatUsage = d3.format(".2f")





    formatDay = d => {
        const formatMonth = d3.timeFormat("%b %-d");
        const formatDate = d3.timeFormat("%-d");
        return d => (d.getDate() === 1 ? formatMonth : formatDate)(d);
    }

    formatHour = d => {
        return d => d === 0 ? "12 AM" : d === 12 ? "12 PM" : (d % 12) + "";
    }





    // series = d3.stack()
    //     .keys(colors.keys())
    //     .value((group, key) => group.get(key).value)
    //     .order(d3.stackOrderReverse)
    //     (d3.rollup(data, ([d]) => d, d => d.year, d => d.name).values())
    //     .map(s => (s.forEach(d => d.data = d.data.get(s.key)), s))

    // chart = chart => {
    //     const svg = d3.create("svg")
    //         .attr("viewBox", [0, 0, width, height]);

    //     svg.append("g")
    //         .selectAll("g")
    //         .data(series)
    //         .join("g")
    //         .attr("fill", ({ key }) => color(key))
    //         .call(g => g.selectAll("rect")
    //             .data(d => d)
    //             .join("rect")
    //             .attr("x", d => x(d.data.year))
    //             .attr("y", d => y(d[1]))
    //             .attr("width", x.bandwidth() - 1)
    //             .attr("height", d => y(d[0]) - y(d[1]))
    //             .append("title")
    //             .text(d => `${d.data.name}, ${d.data.year}${formatRevenue(d.data.value)}`));

    //     svg.append("g")
    //         .call(xAxis);

    //     svg.append("g")
    //         .call(yAxis);

    //     document.body.append(svg.node())
    // }
    // //初始化
    // chart()




</script>

</html>